<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>登录</title>
    {% include 'system/common/header.html' %}
  </head>

  <body>
    <div class="login-page">
      <div class="layui-row">
        <div class="layui-col-sm6 login-bg">
          <img
            class="login-bg-img"
            src="/static/system/admin/images/logo.png"
            alt=""
          />
        </div>
        <div class="layui-col-sm6 login-form">
          <div class="layui-form">
            <div class="form-center">
              <div class="form-center-box">
                <div class="top-log-title">
                  <img
                    class="top-log"
                    src="h/static/system/admin/images/logo.png"
                    alt=""
                  />
                  <span>Pear Admin Flask</span>
                </div>
                <div class="top-desc">
                  以 超 乎 想 象 的 速 度 构 建 内 部 工 具
                  <br />
                  <br />
                  （注册账号）
                </div>
                <div style="margin-top: 30px">
                  <div class="layui-form-item">
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                      </div>
                      <input
                        lay-verify="required"
                        placeholder="账户"
                        autocomplete="off"
                        name="username"
                        value=""
                        class="layui-input"
                      />
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                      </div>
                      <input
                        type="password"
                        name="password"
                        value=""
                        lay-verify="required|confirmPassword"
                        placeholder="密码"
                        autocomplete="off"
                        class="layui-input"
                        lay-affix="eye"
                      />
                    </div>
                  </div>
                  <div class="tab-log-verification">
                    <div class="verification-text">
                      <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                          <i class="layui-icon layui-icon-auz"></i>
                        </div>
                        <input
                          lay-verify="required"
                          placeholder="验证码"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                    </div>
                    <img
                      src="{{ url_for('system.passport.get_captcha') }}"
                      alt=""
                      class="verification-img"
                    />
                  </div>
                  <div class="layui-form-item">
                    <div class="remember-passsword">
                      <div class="remember-cehcked">
                        <input
                          type="checkbox"
                          name="login-in"
                          lay-skin="primary"
                          title="注册成功后自动登录"
                          checked
                        />
                      </div>
                    </div>
                  </div>
                  <div class="login-btn">
                    <button
                      type="button"
                      lay-submit
                      lay-filter="login-in"
                      class="layui-btn login"
                    >
                      登 录
                    </button>
                  </div>
                  <div class="other-login">
                    <div class="other-login-methods">其他方式</div>
                    <a class="greenText" href="/admin/system/passport/login">登录</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 资 源 引 入 -->
    {% include 'system/common/footer.html' %}
    <script>
      layui.use(["form", "button", "popup", "jquery"], function () {
        var form = layui.form;
        var button = layui.button;
        var popup = layui.popup;
        var $ = layui.jquery;

        // 登 录 提 交
        form.on("submit(login-in)", function (data) {
          /// 验证

          /// 动画
          let btn = button.load({ elem: ".login" });
          let captchaPath = "{{ url_for('system.passport.get_captcha') }}";
          /// 登录
          $.ajax({
            url: "/api/v1/login",
            type: "POST",
            data: JSON.stringify(data.field),
            contentType: "application/json",
            success: function (res) {
              btn.stop(function () {
                popup.success("登录成功", function () {
                  location.href = "/";
                });
              });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              btn.stop(function () {
                popup.failure(XMLHttpRequest.responseJSON.msg);
              });
            },
          });
          return false;
        });
      });
    </script>
  </body>
</html>
